<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <ul style="width:800px;margin:0px auto">
            <li v-for="(item,i) in shopcartlist" style="align-items: center;flex-wrap: wrap;display:flex;justify-content:space-between">
                <img :src="item.img" style="width:100px;height:80px">
                <div style="width:250px;overflow:hidden">
                    {{item.title}}
                </div>
                <div>
                    {{item.type | formatType}}
                </div>
                <div>
                    {{item.price.toFixed(2)}}
                </div>
                <div>
                    <button @click="jian(item,i)" :disabled="item.count<=1">-</button>
                    {{item.count}}
                    <button @click="jia(item,i)">+</button>
                </div>
                <div>
                    {{(item.count*item.price).toFixed(2)}}
                </div>
                <div style="color:red" @click="del(item.id)">
                    删除
                </div>
            </li>
        </ul>
        <h1>
            <!-- {{totapPirceCN}}--{{totapPirceJP}} -- {{totapPirceUSA}} -->
        </h1>
    </div>
    <script src="https://cdn.bootcss.com/vue/2.6.4/vue.js"></script>
    <script src="https://cdn.bootcss.com/axios/0.19.0-beta.1/axios.js"></script>
    <script src="js/vue-filter.js"></script>
    <script>
        Vue.config.productionTip = false
        Vue.config.devtools = false
        var vm = new Vue({
            el: "#app",
            created() {
                this.shopcartids = JSON.parse(localStorage.getItem("shopcart"))
                this.getShopCartList()
            },
            computed: {
                totapPirceCN() {
                    return "人民币" + this.totalprice.toFixed()
                },
                totapPirceJP() {
                    return "日元" + (this.totalprice * 20).toFixed()
                },
                totapPirceUSA() {
                    return "$" + (this.totalprice / 7).toFixed()
                }
            },
            data: {
                shopcartids: [],
                shopcartlist: [],
                totalprice: 0
            },
            watch: {
                shopcartlist(val) {
                    this.calcTotal()
                }
            },
            methods: {

                calcTotal() {
                    this.totalprice = 0
                    this.shopcartlist.forEach(r => {
                        this.totalprice += (r.price * r.count)
                    })
                },
                del(id) {
                    this.shopcartlist = this.shopcartlist.filter(r => r.id !== id)
                    this.shopcartids = this.shopcartids.filter(r => r.id !== id)
                    localStorage.setItem("shopcart", JSON.stringify(this.shopcartids))
                },

                jian(item, i) {
                    if (item.count > 1) {
                        item.count--
                        //触发数组的响应式更新，使页面重新渲染
                        this.$set(this.shopcartlist, i, item)
                    }
                },
                jia(item, i) {
                    item.count++
                    this.$set(this.shopcartlist, i, item)
                },
                getShopCartList() {
                    axios.get("data/goods.json").then(res => {
                        res.data.forEach(item => {
                            // this.shopcartids.forEach(item1 => {
                            //     if (item.id === item1.id) {
                            //         item.count = item1.count
                            //         this.shopcartlist.push(item)
                            //     }
                            // })
                            this.shopcartlist =res.data
                        });
                    })
                }
            }
        })
    </script>
</body>

</html>